<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-on:click</title>
		<script type=text/javascript src="../vue.js"></script>
	</head>
	<body>
		<div id="app">
		    <runoob-a :sid="test" title="asss" v-slot:[name]>{{test}}</runoob-a>
			<runoob-b sid="rb" title="rtitle" v-slot:header2="props">{{props}}ss</runoob-a>
		</div>
	</body>
	<script>
		//view model
		var runoobA = {
		  props: ['sid','title'],
		  template: `<h1><slot name='header1'></slot></h1>`
		}
		var runoobB = {
		  props: ['sid','title'],
		  template: `<h1><slot name='header2' :rId="sid" :rName="title"></slot></h1>`
		}
		 
		const app = Vue.createApp({
		  data() {
		    return {
		      sites: [
		        { id: '5', title: 'Google' },
		        { id: 2, title: 'Runoob' },
		        { id: 3, title: 'Taobao' }
		      ],
		  	  si:{
		  		id:4,title:'success'
		  	  },
			  test:'testddd',
			  name:'header1'
		    }
		  },
		  components: {
		    'runoob-a': runoobA,
			'runoob-b': runoobB
		  }
		})
		 
		app.mount('#app')
	</script>
</html> 